<template>
  <div>
    <van-row type="flex"
             align="center">
      <van-col span="6">天使童装</van-col>
      <van-col span="15">
        <van-search></van-search>
      </van-col>
    </van-row>
    <!-- 轮播图组件 -->
    <banner-com></banner-com>
    <div class="cate">
      <div class="cate_list">
        <div class="cate_one"
             v-for="(item,index) in cateList"
             :key="item.id"
             @click="turnCate(item.id,index)">
          <img :src="item.icon"
               alt="">
          <p>{{item.name}}</p>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <product-list></product-list>
  </div>
</template>
<script>
import bannerCom from '../components/bannerCom.vue'
import productList from '../components/product.vue'
import { getCateApi } from '../api/home'
export default {
  name: 'Home',
  components: {
    bannerCom,
    productList
  },
  data () {
    return {
      cateList: []
    }
  },
  created () {
    this.getCate() //获取分类数据
  },
  methods: {
    async getCate () {
      var res = await getCateApi()
      console.log(res)
      this.cateList = res.data.data;
    },
    turnCate (id, index) { //首页分类跳转分类页面 传送id
      this.$router.push({ name: "category", params: { cid: id, index: index } })
      this.$store.dispatch("indexActions", 1) //跳转分类页 改变vuex中的激活下标
    }
  },
}
</script>
<style lang="less">
.cate {
  width: 100%;
  height: 300px;
  background: white;
  margin-top: 20px;
  .cate_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .cate_one {
      width: 18%;
      margin-top: 20px;
      img {
        width: 100%;
        height: 100px;
      }
    }
  }
}
</style>
